<template>
    <div class="technology">
        <dl>
            <dt>
                We will turn your creative thoughts <br /> into satisfying reality.

            </dt>
            <dd>
                <figure>
                    <img src="https://img.podpartner.com/static/images-20230202/home-technology-1.png" alt="">
                </figure>
                <p>• Our high-performance Brother GTX Pro-B DTG printing machine will perfectly bring your design to life with its exceptional print quality and eco-friendly water-based ink.</p>
            </dd>
            <dd>
                <figure>
                    <img src="https://img.podpartner.com/static/images-20230202/home-technology-2.png" alt="">
                </figure>
                <p>• Thanks to our efficient in-house production and years of industry experience, 98% of the orders can be fulfilled within 48 hours.</p>
            </dd>
            <dd>
                <figure>
                    <img src="https://img.podpartner.com/static/images-20230202/home-technology-3.png" alt="">
                </figure>
                <p>• We follow stringent quality control standards to ensure that all end products achieve excellent customer satisfaction ratings. </p>
            </dd>
        </dl>
    </div>
</template>
<script>
export default {
    name: "HomeSummarizeTechnology",
    props: {
        scroll: { type: Number, default: 0 }
    },
    data () {
        return {
            dom: {}
        }
    },
    watch: {
        scroll (v) {
            this.doAnimation()
        },

    },
    methods: {
        doAnimation () {
            const { title, dds } = this.dom
            const titleHeight = title.clientHeight
            let diff_scroll = Math.max(this.scroll - titleHeight - 160, 0);
            let rate_dd_1 = this.$getRate(diff_scroll, 0, 3, titleHeight)
            let rate_dd_2 = this.$getRate(diff_scroll, 1, 3, titleHeight)
            let rate_dd_3 = this.$getRate(diff_scroll, 2, 3, titleHeight)
            dds[0].style.opacity = rate_dd_1;
            dds[1].style.opacity = rate_dd_2;
            dds[2].style.opacity = rate_dd_3;
        },
        getDoms () {
            let technology = document.querySelector('.technology');
            let title = technology.querySelector('dt');
            let dds = technology.querySelectorAll('dd');
            this.dom = { technology, title, dds };
        }
    },
    mounted () {
        this.$on('global:homeResize', this.getDoms);
        this.getDoms();
    }
}
</script>
<style scoped lang="scss">
.technology {
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    dl {
        width: 1000px;
        height: 748px;
        display: flex;
        flex-direction: column;
        align-items: center;
        dt {
            font-family: Roboto-Bold, Roboto;
            font-weight: 400;
            font-size: 56px;
            color: #ffffff;
            line-height: 72px;
            text-align: center;
        }
        dd {
            opacity: 0;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-top: 32px;
            figure {
                width: 260px;
                height: 160px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                width: 686px;
                height: 108px;
                font-size: 24px;
                font-family: Roboto;
                color: #ffffff;
                line-height: 36px;
            }
            &:nth-child(2) {
                margin-top: 60px;
            }
        }
        // &.show {
        //     dd {
        //         &:nth-child(2) {
        //             animation: show-item 1s 0.2s forwards;
        //         }
        //         &:nth-child(3) {
        //             animation: show-item 1s 0.4s forwards;
        //         }
        //         &:nth-child(4) {
        //             animation: show-item 1s 0.6s forwards;
        //         }
        //     }
        // }
    }
}

@media screen and (max-width: 960px) {
    .technology {
        width: 100%;
        height: auto;
        padding: 80px 14px;
        height: auto;
        min-height: auto;
        * {
            opacity: 1 !important;
        }
        dl {
            width: auto;
            height: auto;
            dt {
                padding: 30px 0;
                font-size: 29px;
                font-weight: bold;
                color: #ffffff;
                line-height: 40px;
                br {
                    display: none;
                }
            }
            dd {
                margin-top: 0;
                flex-direction: column;
                figure {
                    width: 100%;
                    max-width: 500px;
                    height: auto;
                    margin-bottom: 14px;
                }
                p {
                    width: auto;
                    max-width: 500px;
                    height: auto;
                    font-size: 15px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 22px;
                    margin-bottom: 32px;
                }
            }
        }
    }
}
</style>
